<template>
<div>
  <el-card>
    <el-card style="margin-top: 10px;padding: 10px" v-for="(item,index) in responseMedicalOrder.data" :key="index">
      <div class="content">
        <p style="width: 300px">购买医院: <span style="font-weight: bold">{{ item.hospitalName }}</span></p>
        <p style="width: 150px">实付款: <span style="font-weight: bold;color: #ffa502">{{ item.price }}</span></p>
        <p :style="'width: 150px;font-weight: bold;color:' + getStatusColor(item.status)">{{getStatus(item.status)}}</p>
        <p style="width: 300px">下单时间: <span style="font-weight: bold">{{ item.createTime }}</span></p>
        <el-link style="margin-right: 15px" type="primary" @click="getDetail(item)">查看详情</el-link>
        <div style="width: 100px">
          <el-button type="danger" v-if="item.status === 1" @click="deleteOrder(item.orderUuid)">撤销订单</el-button>
          <el-button type="success" v-if="item.status === 2" @click="successOrder(item.orderUuid)">确认收货</el-button>
        </div>
      </div>
    </el-card>
    <el-pagination
      style="margin-top: 20px"
      background
      @current-change="handleCurrentChange"
      :current-page.sync="responseMedicalOrder.currentPage"
      :page-sizes="[responseMedicalOrder.pageSize]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="responseMedicalOrder.total">
    </el-pagination>

    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="55%">
      <div>
        <div style="display: flex">
          <h3 style="margin-bottom: 10px">物流追踪</h3>
          <span style="margin-left: 20px;margin-top: 17px;color: #a4b0be">{{responseExpress.expressCompany}}</span>
          <span style="margin-left: 20px;margin-top: 17px;color: #a4b0be">快递单号: {{responseExpress.expressId}}</span>
          <span style="margin-left: 20px;margin-top: 17px;color: #a4b0be">收货地址: {{ responseExpress.address }}</span>
        </div>
        <el-empty description="无物流信息" v-if="responseExpress.logistics == undefined"></el-empty>
        <div v-if="responseExpress.logistics != undefined">
          <el-card>
            <div v-if="!responseExpress.logistics.Success" style="margin: 25px 20px 15px 15px;">
              {{responseExpress.logistics.Reason}}
            </div>
            <el-timeline style="margin: 25px 20px 15px 5px;">
              <el-timeline-item
                v-for="(activity, index) in responseExpress.logistics.Traces"
                :key="index"
                :icon="index === responseExpress.logistics.Traces.length - 1 && responseExpress.logistics.Success ? 'el-icon-check' : ''"
                :type="index === responseExpress.logistics.Traces.length - 1 && responseExpress.logistics.Success ? 'success' : 'primary'"
                :timestamp="activity.AcceptTime">
                {{activity.AcceptStation}}
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </div>
      </div>

      <div>
        <h3 style="margin-bottom: 10px">订单详情</h3>
        <el-card
          :body-style="{backgroundColor: getColor(item.type)}" shadow="always" v-for="(item,index) in responseBeforePlaceOrder"
          :key="index"
          style="margin-top: 30px;margin-left: 20px;margin-right: 20px">
          <div class="hospital-medical-list">
            <img :src="item.showUrl" fit="fit" style="height: 130px; width: 130px; padding: 0px">
            <div style="font-size: 15px;width: 250px">
              <p>名称: <span style="font-weight: bold">{{item.medicalName}}</span></p>
              <p>种类: <span style="font-weight: bold">
              {{ optionsInMedicalType.filter(items => items.value === item.type).length > 0 ?
                optionsInMedicalType.filter(items => items.value === item.type)[0].label : undefined }}
            </span></p>
              <p style="margin-top: -5px">处方类型: <el-tag :type="getOTCType(item.isOTC)">
                {{ optionsInisOTC.filter(items => items.value === item.isOTC).length > 0 ?
                optionsInisOTC.filter(items => items.value === item.isOTC)[0].label : undefined }}
              </el-tag></p>
            </div>
            <div>
              <p style="font-size: 20px; font-weight: bold; color: #ff5000;float: right;margin-right: 10px;width: 150px">￥{{item.medicalPrice}}/
                {{ optionsInMedicalManageUnit.filter(items => items.value === item.unit).length > 0 ?
                  optionsInMedicalManageUnit.filter(items => items.value === item.unit)[0].label : undefined }}</p>
            </div>
            <span style="font-size: 16px">数量:
            <span style="width: 150px;margin-left: 10px">{{item.count}}</span>
          </span>
            <div style="margin-right: 20px">
                <span style="font-size: 16px;">
                  <p>医院名称: <span style="font-weight: bold">{{ item.hospitalName }}</span></p>
                </span>
            </div>
          </div>
          <span style="color: #e67e22; float: right;margin-top: -20px">库存: <span> {{ item.reserveCount }} </span></span>
        </el-card>
      </div>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
import {beforePlaceOrder, deleteOrder, getExpress, getOrder, successOrder} from '../api/userApi'

export default {
  name: 'Order',
  data () {
    return {
      dialogVisible: false,
      requestMedicalOrder: {
        currentPage: 1,
        pageSize: 7,
        status: undefined
      },
      responseMedicalOrder: {
        currentPage: undefined,
        pageSize: undefined,
        lastPage: undefined,
        total: undefined,
        data: []
      },
      responseBeforePlaceOrder: [{
        medicalUuid: undefined,
        hospitalUuid: undefined,
        count: undefined,
        medicalName: undefined,
        hospitalName: undefined,
        medicalPrice: undefined,
        reserveCount: undefined,
        showUrl: undefined,
        type: undefined,
        unit: undefined,
        isOTC: undefined
      }],
      responseExpress: {
        address: undefined,
        // area: undefined,
        // detail: undefined,
        expressCompany: undefined,
        expressId: undefined,
        deliveryTime: undefined,
        logistics: {
          EBusinessID: undefined,
          Reason: undefined,
          LogisticCode: undefined,
          ShipperCode: undefined,
          State: undefined,
          Success: undefined,
          Traces: [{
            AcceptStation: undefined,
            AcceptTime: undefined
          }]
        }
      },
      optionsInMedicalTypeSearch: [{
        value: 1,
        label: '药品名称'
      }, {
        value: 2,
        label: '医院名称'
      }],
      optionsInMedicalType: [{
        value: 1,
        label: '中药'
      }, {
        value: 2,
        label: '西药'
      }, {
        value: 3,
        label: '中成药'
      }],
      according: [{
        value: 1,
        label: '价格排序'
      }, {
        value: 2,
        label: '库存排序'
      }],
      optionsInisOTC: [{
        value: 1,
        label: '处方药'
      }, {
        value: 2,
        label: '甲类非处方药'
      }, {
        value: 3,
        label: '乙类非处方药'
      }, {
        value: 4,
        label: '既是处方又是非处方药'
      }, {
        value: 5,
        label: '未定义'
      }],
      optionsInMedicalManageUnit: [{
        value: 1,
        label: '盒'
      }, {
        value: 2,
        label: '瓶'
      }, {
        value: 3,
        label: '袋'
      }, {
        value: 4,
        label: '克'
      }, {
        value: 5,
        label: '支'
      }, {
        value: 6,
        label: '粒'
      }]
    }
  },
  methods: {
    successOrder (orderUuid) {
      this.$confirm('是否确认收货?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        successOrder({
          orderUuid: orderUuid
        }).then((res) => {
          if (res.code === 200) {
            this.getOrder(this.requestMedicalOrder.status)
          }
        })
      })
    },
    deleteOrder (orderUuid) {
      this.$confirm('是否撤销该订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrder({
          orderUuid: orderUuid
        }).then((res) => {
          if (res.code === 200) {
            this.getOrder(this.requestMedicalOrder.status)
          }
        })
      })
    },
    // 获取处方类型
    getOTCType (isOTC) {
      switch (isOTC) {
        case 1:
          return ''
        case 2:
          return 'danger'
        case 3:
          return 'success'
        case 4:
          return 'warning'
        case 5:
          return 'info'
      }
    },
    getDetail (item) {
      this.dialogVisible = true
      this.getMedical(item)
      this.getExpress(item)
    },
    getMedical (item) {
      let tmp = []
      item.orderContent.map(i => {
        tmp.push({
          medicalUuid: i.medicalUuid,
          count: i.count,
          hospitalUuid: item.hospitalUuid
        })
      })
      beforePlaceOrder({
        list: tmp
      }).then((res) => {
        if (res.code === 200) {
          this.responseBeforePlaceOrder = res.data
        }
      })
    },
    getExpress (item) {
      getExpress({
        orderUuid: item.orderUuid
      }).then((res) => {
        if (res.code === 200) {
          this.responseExpress.address = res.data.address
          // this.responseExpress.area = res.data.area
          // this.responseExpress.detail = res.data.detail
          this.responseExpress.expressId = res.data.expressId
          this.responseExpress.expressCompany = res.data.expressCompany
          this.responseExpress.deliveryTime = res.data.deliveryTime
          this.responseExpress.logistics = JSON.parse(res.data.logistics)
        }
      })
    },
    handleCurrentChange (val) {
      this.requestMedicalOrder.currentPage = val
      this.getOrder(this.requestMedicalOrder.status)
    },
    getStatusColor (status) {
      switch (status) {
        case 1:
          return '#e74c3c'
        case 2:
          return '#e67e22'
        case 3:
          return '#27ae60'
      }
    },
    getStatus (status) {
      switch (status) {
        case 1:
          return '待发货'
        case 2:
          return '待收货'
        case 3:
          return '已完成'
      }
    },
    getOrder (status) {
      this.requestMedicalOrder.status = status
      getOrder({
        currentPage: this.requestMedicalOrder.currentPage,
        pageSize: this.requestMedicalOrder.pageSize,
        status: this.requestMedicalOrder.status
      }).then((res) => {
        if (res.code === 200) {
          this.responseMedicalOrder = res.data
        }
      })
    }
  },
  computed: {
    getColor () {
      return (param) => {
        switch (param) {
          case 1:
            return 'rgba(155, 89, 182,0.12)'
          case 2:
            return 'rgba(39, 133, 248, 0.12)'
          case 3:
            return 'rgba(231, 76, 60, 0.12)'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hospital-medical-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
